<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱心砰砰跳</title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		body{
			display:flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: linear-gradient(200deg,#ffcccc,#ff3399);
		}
		.love{
			position:relative;
			width: 200px;
			height: 200px;
			transform: rotate(45deg);
			background: crimson;
			animation: love 1s infinite;
		}
		.love::after,.love::before{
			content:'';
			position: absolute;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: crimson;
			animation: love 1s infinite;
		}
		.love::after{
			top:0;
			left: -100px;
		}
		.love::before{
			top:-100px;
			left: 0;
		}
/*		定义心跳动画*/
		@keyframes love{
			0%{
				width:200px;
				height: 200px;
			}
			20%{
				width:230px;
				height: 230px;
				background: #ef3953;
			}
			100%{
				width:200px;
				height: 200px;
			}
		}
	</style>
</head>

<body>
	<div class="love"></div>
</body>
</html>
